<template>
  <a-spin :spinning="state.loading">
    <h4 class="mb10">
      <span class="mr20" v-if="state.isBulkBind"
        >版本： {{ state.materialData.version || '-' }}</span
      >
      <span class="mr20" v-if="state.isBulkBind"
        >备注：{{ state.materialData.remark || '-' }}</span
      >
      <span v-if="state.isSwimSuit && state.type !== 3" class="mr20">
        BOM版本号：{{ state.materialData.bomVersionStr }}
      </span>
      <span v-if="state.isSwimSuit && state.type !== 3">
        BOM版本备注：{{ state.materialData.bomRemark }}
      </span>
    </h4>
    <a-tabs v-model:activeKey="state.activeKey" size="small">
      <a-tab-pane :key="1" tab="用料明细">
        <materialDetail
          :innovite="state.isSwimSuit === 0"
          ref="materialRef"
          v-if="state.activeKey === 1"
          :disabled="true"
          :cp="state.cp"
          :isLargeProcess="$attrs.isLargeProcess"
          :params="otherParams"
          @update:data="updateMaterialData"
          :detail-func="materialDetailFunc"
        />
      </a-tab-pane>
      <a-tab-pane :key="2" tab="工艺明细">
        <innoviate-processDetail
          v-if="state.isSwimSuit === 0"
          :disabled="true"
          :isLargeProcess="$attrs.isLargeProcess"
          ref="innoviateProcessRef"
          :cp="state.cp"
          :reviewCommentsType="reviewCommentsType"
          :params="otherParams"
          :detail-func="queryDetailFunc"
          :innovite="true"
        />
        <processDetail
          v-else
          ref="processRef"
          :disabled="$attrs.disabledFeatures || true"
          :cp="state.cp"
          :isLargeProcess="$attrs.isLargeProcess"
          :params="otherParams"
          :detail-func="queryDetailFunc"
          :processId="state.processId"
        />
      </a-tab-pane>
      <a-tab-pane :key="3" tab="唛头信息">
        <marks-info
          :hasId="true"
          v-if="state.activeKey === 3"
          :params="exportParams"
        ></marks-info>
      </a-tab-pane>
      <a-tab-pane :key="4" tab="导出&附件">
        <a-row class="mb10">
          <a-button
            size="small"
            :loading="state.btnLoading[0]"
            class="mr10"
            @click="exportcurrentProcess"
            v-if="+state.systemType === 1"
          >
            导出当前工艺单
          </a-button>
          <a-button
            v-else
            size="small"
            :loading="state.btnLoading[0]"
            class="mr10"
            @click="exportProcess"
          >
            导出当前工艺单
          </a-button>
          <a-button
            size="small"
            :loading="state.btnLoading[1]"
            class="mr10"
            @click="exportFile(1)"
          >
            导出花稿
          </a-button>
          <a-button
            size="small"
            class="mr10"
            :loading="state.btnLoading[2]"
            @click="exportFile(2)"
          >
            导出纸样
          </a-button>

          <a-button
            size="small"
            class="mr10"
            :loading="state.btnLoading[4]"
            v-if="+state.systemType === 1"
            @click="exportProcess"
          >
            导出全部数据
          </a-button>
        </a-row>
        <h5>工艺单附件</h5>
        <a-table
          size="small"
          bordered
          :columns="attachColumns"
          :data-source="state.gongyiDownload"
          :pagination="false"
          :row-key="(record, index) => index"
        >
          <template #download="{ record }">
            <a @click="downloadFile(record.ossUrl, record.ossName)">下载</a>
          </template>
        </a-table>
      </a-tab-pane>
      <slot name="addTab"></slot>
    </a-tabs>
  </a-spin>
</template>

<script setup>
import marksInfo from './marksInfo.vue'
import { downloadFile } from 'utils/file.js'
import { useAttrs, watch } from 'vue'
defineProps({
  processId: {
    type: [String, Number],
    default: 1
  }
})
import {
  useWorkSheet,
  attachColumns,
  useWorkExport,
  useState
} from './workSheet.js'
const attrs = useAttrs()
const state = useState(attrs)
const {
  materialDetailFunc,
  updateMaterialData,
  queryDetailFunc,
  reviewCommentsType,
  otherParams
} = useWorkSheet(state, attrs)
// 工艺单导出相关
const {
  exportParams,
  exportcurrentProcess,
  fetchLoadModal,
  exportProcess,
  exportFile
} = useWorkExport(state, attrs)

watch(
  () => state.activeKey,
  val => {
    if (+val === 4) {
      fetchLoadModal()
    }
  }
)
</script>

<style lang="scss" scoped>
.step2 h3 {
  margin-bottom: 10px;
}
.img-list :deep,
.rule-img :deep {
  .ant-image {
    margin-right: 10px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
  }
  .ant-image-img {
    padding: 5px;
    border: 1px dashed #999;
  }
}
.rule-table {
  flex: 1;
  margin-left: 20px;
}
</style>
